<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" inline>
      <el-form-item v-hasRole="['admin']" :label="$t('Department')" prop="deptId">
        <department-select v-model="queryParams.deptId" style="width: 200px" />
      </el-form-item>
      <el-form-item :label="$t('Code')" prop="code">
        <el-input v-model="queryParams.code" clearable />
      </el-form-item>
      <el-form-item :label="$t('Status')">
        <el-radio-group v-model="queryParams.status" @change="queryPage">
          <el-radio v-for="(text,index) in statusTexts" :label="index" :key="'report_status_radio_'+index">{{ text }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          {{ $t("Search") }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['device:card:add']">{{ $t("Add") }}</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="queryPage"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
      <el-table-column label="#" type="index" width="45" align="right">
        <template slot-scope="scope">
          <span>{{
            (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('Code')" align="left" prop="code" width="150">
        <template slot-scope="{row}">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(row)" :title="$t('Read')">
            <span>{{ row.code }}</span>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column :label="$t('Category')" width="120">
        <template slot-scope="{row}">
          <dict-tag :options="dict.type.haij_device_type" :value="row.type" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('Summary')" align="left" prop="summary" width="150">
        <template slot-scope="{row}">
          <el-button v-if="row.status !== 2" v-hasPermi="['device:report:edit']" size="mini" type="text"
            icon="el-icon-check" @click="handleResolve(row)" :title="$t('Solution')">
            <span>{{ row.summary }}</span></el-button>
          <span v-else>{{ row.summary }}</span>
        </template>
      </el-table-column>

      <el-table-column :label="$t('Description')" align="left" prop="description" min-width="150" />
      <el-table-column :label="$t('Mobile')" align="left" prop="mobile" width="150" />
      <el-table-column :label="$t('Status')" align="left" prop="status" width="150">
        <template slot-scope="{row}">
          {{ statusTexts[row.status] }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('CreateTime')" align="left" prop="createTime" width="150" />
      <el-table-column :label="$t('Operate')" align="left" width="120" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(row)"
            v-hasPermi="['device:report:delete']" :title="$t('Delete')"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="queryPage" />

    <!-- 添加或修改设备对话框 -->
    <el-dialog :title="title" :visible.sync="formVisible" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-position="top">
        <el-form-item v-hasRole="['admin']" :label="$t('Department')" prop="deptId">
          <department-select v-model="form.deptId" :placeholder="$t('device.InsertDepartment')" />
        </el-form-item>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item :label="$t('Code')" prop="code">
              <el-input v-model="form.code" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('Type')" prop="type">
              <dict-number-select v-model="form.type" :dict="dict.type.haij_device_type" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item :label="$t('Summary')" prop="summary">
          <el-input v-model="form.summary" />
        </el-form-item>
        <el-form-item :label="$t('Description')" prop="description">
          <el-input type="textarea" v-model="form.description" />
        </el-form-item>
        <el-form-item :label="$t('Screenshot')" prop="description">
          <image-upload @input="handleImage" />
        </el-form-item>
        <el-form-item :label="$t('Mobile')" prop="mobile">
          <el-input v-model="form.mobile" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="formSubmit">{{ $t("OK") }}</el-button>
        <el-button @click="formCancel">{{ $t("Cancel") }}</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改设备对话框 -->
    <el-dialog :title="title" :visible.sync="resoveVisible" width="500px" append-to-body>
      <el-form ref="resolveForm" :model="form" :rules="resolveRules" label-position="top" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('Code')" prop="code">
              <span>{{form.code}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('Type')" prop="type">
              <dict-tag :options="dict.type.haij_device_type" :value="form.type" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item :label="$t('Summary')" prop="summary">
          <span>{{form.summary}}</span>
        </el-form-item>
        <el-form-item :label="$t('Description')" prop="description">
          <span>{{form.description}}</span>
        </el-form-item>
        <el-form-item :label="$t('Screenshot')" prop="description">
          <span v-for="(url,index) in screenshots" :key="'screenshot_'+index" class="image-view">
            <image-preview :src="url" width="80px" height="80px" />
          </span>
        </el-form-item>
        <el-form-item :label="$t('Department')" prop="deptId">
          <department-select v-model="form.deptId" :placeholder="$t('device.InsertDepartment')" readonly />
        </el-form-item>
        <el-form-item :label="$t('Mobile')" prop="mobile">
          <el-input v-model="form.mobile" />
        </el-form-item>
        <el-form-item :label="$t('Solution')" prop="Solution">
          <el-input type="textarea" v-model="form.solution" :placeholder="$t('Solution')" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitResolve">{{ $t("OK") }}</el-button>
        <el-button @click="cancelResolve">{{ $t("Cancel") }}</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改设备对话框 -->
    <el-dialog :title="title" :visible.sync="viewVisible" width="500px" append-to-body>
      <el-form label-position="top" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('Code')" prop="code">
              <span>{{form.code}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('Type')" prop="type">
              <dict-tag :options="dict.type.haij_device_type" :value="form.type" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item :label="$t('Summary')" prop="summary">
          <span>{{form.summary}}</span>
        </el-form-item>
        <el-form-item :label="$t('Description')" prop="description">
          <span>{{form.description}}</span>
        </el-form-item>
        <el-form-item :label="$t('Screenshot')" prop="description">
          <span v-for="(url,index) in screenshots" :key="'screenshot_'+index" class="image-view">
            <image-preview :src="url" width="80px" height="80px" />
          </span>
        </el-form-item>
        <el-form-item :label="$t('Mobile')" prop="mobile">
          <span>{{form.mobile}}</span>
        </el-form-item>
        <el-form-item :label="$t('Solution')" prop="Solution">
          <span>{{form.solution}}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="viewVisible = false">{{ $t("Close") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import DataEntity from '@/components/DataEntity/DataEntity'
  import deviceReportAPI from "@/api/device/report";
  import DepartmentSelect from "@/views/system/components/DepartmentSelect.vue";

  export default {
    name: "DeviceReport",
    dicts: ["haij_device_type"],
    mixins: [DataEntity],
    components: {
      DepartmentSelect,
    },
    data() {
      return {
        currentAPI: deviceReportAPI,
        currentBaseURL: '/device/report',
        currentCode: 'device-report',
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        statusTexts: [this.$t('Unread'), this.$t('Read'), this.$t('Resolved')],
        resoveVisible: false,
        viewVisible: false,
        defaultForm: {
          id: null,
          code: null,
          type: null,
          summary: null,
          description: null,
          screenshots: null,
          mobile: null,
          solution: null
        },
        rules: {
          code: [{
            required: true,
            message: this.$t("NotNull"),
            trigger: "blur",
          }],
          summary: [{
            required: true,
            message: this.$t("NotNull"),
            trigger: "blur",
          }]
        },
        resolveRules: {}
      };
    },
    computed: {
      screenshots() {
        const {
          form
        } = this
        return form && form.screenshot ? form.screenshot.split(',').filter(each => each !== '') : []
      }
    },
    methods: {
      handleImage(list) {
        var urls = ""
        for (var i = 0; i < list.length; i++) {
          urls += "," + list[i].url
        }
        this.form.screenshot = urls
      },
      afterAdd() {
        this.form = {}
      },
      markRead(row) {
        if (row.status !== 0) {
          return
        }
        deviceReportAPI.update({
          id: row.id,
          status: 1
        }).then(res => {
          row.status = 1
        })
      },
      handleView(row) {
        this.markRead(row)
        this.form = Object.assign({}, row)
        this.viewVisible = true
      },
      handleResolve(row) {
        this.markRead(row)
        this.form = Object.assign({}, row)
        this.title = this.$t('Solution')
        this.resoveVisible = true
      },
      cancelResolve() {
        this.resoveVisible = false
      },
      submitResolve() {
        const vm = this
        this.form.status = 2
        deviceReportAPI.update(this.form).then(() => {
          vm.$message({
            type: 'success',
            message: vm.$t('OperateSuccess')
          })
          vm.resoveVisible = false
          vm.queryPage()
        })
      },
    }
  };

</script>
<style scoped>
  .image-view {
    margin: 3px;
    padding: 5px;
  }

</style>
